<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/public.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/user/find_password.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/user/rp_head.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/user/sliding.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/iconFont/iconfont.css">
    <script src="${pageContext.request.contextPath}/static/js/frame/jquery-3.5.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/self/user/sliding.js"></script>
</head>
<body>
<!-- 头部 start-->

<div id="header">
    <div class="header-layout">
        <h1 class="logo" id="logo">
            <a href="/">天猫</a>
            <span class="subtitle">  </span>
        </h1>
        <h2 class="logo-title"> 找回密码 </h2>
        <ul class="header-nav">
            <li class="nav-first"><a href="/register_01_mobile.htm" target="_blank"> 注册 </a></li>
            <li><a href="/login.htm" target="_blank"> 登录 </a></li>
            <li><a href="/user/index.htm" target="_blank">  我的   天猫</a></li>
        </ul>

    </div>
</div>

<!-- 头部 end-->

<!-- 身体 start-->

<div id="content">
    <div class="content-layout" data-spm-anchor-id="a1z5k.7633538.0.i2.91534c38o0UeFI">
        <div class="maincenter">
            <div class="maincenter-box">
                <div class="maincenter-box-tip">
                    <p class="ui-tiptext ui-tiptext-message ft-14">
                        <i class="iconfont icon-tixing" title=" 提示 "></i>
                        请输入你需要找回登录密码的账户名
                    </p>
                </div>
                <form class="ui-form" id="J_Form" method="post" action="${pageContext.request.contextPath}/login/check_name.htm">
                    <div class="ui-form-item" data-spm-anchor-id="a1z5k.7633538.0.i1.91534c38o0UeFI">
                        <label class="ui-label"> 登录名: </label>
                        <input id="user" name="user" class="ui-input" type="text" placeholder="手机/邮箱/会员名">
                        <c:if test="${empty sessionScope.msg}" var="message">
                            <div class="ui-form-explain" style="color: red; display: none"><i class="form-error"></i> <span id="text">请输入登录名</span> </div>
                        </c:if>
                        <c:if test="${!message}">
                            <div class="ui-form-explain" style="color: red; display: block"><i class="form-error"></i> <span id="text">${sessionScope.msg}</span> </div>
                        </c:if>
                    </div>


                    <div id="need_nc_check" class="ui-form-item">
                        <p class="ui-form-text"> 为了您的账户安全，请进行安全校验 </p>
                    </div>
                    <div id="nc_check_error" class="ui-form-item ui-form-item-error" style="display: none">
                        <div class="ui-form-explain"> 滑动验证失败 </div>
                    </div>
                    <div class="ui-form-item">
                        <div id="drag"></div>
                        <script type="text/javascript">
                            $('#drag').sliding();
                        </script>
                    </div>
                    <div class="ui-form-item ui-form-item-last">
                        <input type="submit" value=" 确定 " class="ui-button ui-button-lorange" id="submitBtn">
                    </div>
                </form>


            </div>
        </div>
    </div>
</div>

<!-- 身体 end-->
</body>
<script>
    $(function () {
        $("#user").focus(function () {
            $(this).css({"border":"1px #ddd solid", "color":"#6C6C6C"});
            $(".ui-form-explain").hide();
        }).blur(function () {
            if("" == $(this).val() || null == $(this).val()){
                $(this).css({"border":"1px solid #ff6749", "color":"#ff6749"});
                $(".ui-form-explain").show();
                $("#text").text("请输入登录名");
            }
        });


        $("#J_Form").submit(function () {
            isEmpty = "" == $("#user").val() || null == $("#user").val();
            if(isEmpty){
                $("#user").css({"border":"1px solid #ff6749", "color":"#ff6749"});
                $(".ui-form-explain").show();
                $("#text").text("请输入登录名");
            }
            if(!isCheck){
                $(".ui-form-text").css("color","red").text("滑动验证失败");
            }

            if(isEmpty || !isCheck){
                return false;
            }
        })
    })
</script>
</html>
